<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all">
    <title>I 家政</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="new/css/bootstrap.min.css">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="new/css/main.css">
    <link rel="stylesheet" href="new/css/blue.css">
    <link rel="stylesheet" href="new/css/owl.carousel.css">
    <link rel="stylesheet" href="new/css/owl.transitions.css">
    <link rel="stylesheet" href="new/css/animate.min.css">
    <link rel="stylesheet" href="new/css/rateit.css">
    <link rel="stylesheet" href="new/css/bootstrap-select.min.css">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="new/css/font-awesome.css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
          rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        /* 在引入的css文件中写入这个*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body class="cnt-home">
<div id="indexContent" v-cloak>
    <!-- ============================================== HEADER ============================================== -->
    <header class="header-style-1">

        <!-- ============================================== TOP MENU ============================================== -->
        <div class="top-bar animate-dropdown">
            <div class="container">
                <div class="header-top-inner">
                    <div class="cnt-account">
                        <ul class="list-unstyled">
                            <li class="wishlist"><a href="index.html"><span>首页</span></a></li>
                            <li v-if="isLogin" class="check"><a href="javascript:;" @click="logout"><span>退出</span></a></li>
                            <li v-else class="login"><a href="Login.html"><span>登录</span></a></li>
                        </ul>
                    </div>

                    <div v-if="isLogin" class="cnt-block">
                        <ul class="list-unstyled list-inline">
                            <li class="dropdown dropdown-small"> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="value">欢迎你：{{nickName}}</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="MyCart.html">我的预约</a></li>
                                    <li><a href="MyFocus.html">我的关注</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- /.header-top-inner -->
            </div>
            <!-- /.container -->
        </div>
        <!-- /.header-top -->
        <!-- ============================================== TOP MENU : END ============================================== -->
        <div class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
                        <!-- ============================================================= LOGO ============================================================= -->
                        <div class="logo"><a href="index.html"> <img src="new/images/logo.png" alt="logo"> </a></div>
                        <!-- /.logo -->
                        <!-- ============================================================= LOGO : END ============================================================= -->
                    </div>
                    <!-- /.logo-holder -->

                    <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
                        <!-- /.contact-row -->
                        <!-- ============================================================= SEARCH AREA ============================================================= -->
                        <div class="search-area">
                            <form>
                                <div class="control-group">
                                    <ul class="categories-filter animate-dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown"  href="#">搜索</a>
                                    </ul>
                                    <input class="search-field" v-model="searchValue"  placeholder="请输入要搜索的家政服务"/>
                                    <a class="search-button" href="#" @click="searchName"  ></a></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-3 sidebar">
                    <div class="side-menu animate-dropdown outer-bottom-xs">
                        <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 服务分类</div>
                        <nav class="yamm megamenu-horizontal">
                            <ul class="nav">
                                <li v-for="(temp,index) in types" v-if="!temp.isComplete" class="dropdown menu-item"><a href="#"
                                                                                                                        class="dropdown-toggle"
                                                                                                                        data-toggle="dropdown"><i
                                        class="icon fa fa-shopping-bag" aria-hidden="true"></i>{{temp.typeName}}</a>
                                    <ul class="dropdown-menu mega-menu">
                                        <li class="yamm-content">
                                            <div class="row">
                                                <div class="col-sm-5 col-md-5">
                                                    <ul class="links list-unstyled">
                                                        <li v-for="(temps,index) in temp.children" @click="toCategory(temps.id,temps.typeName)" v-if="!temps.isComplete"><a href="#">{{temps.typeName}}</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- /.row -->
                                        </li>
                                        <!-- /.yamm-content -->
                                    </ul>
                                </li>
                            </ul>
                            <!-- /.nav -->
                        </nav>
                        <!-- /.megamenu-horizontal -->
                    </div>
                </div>
                <!-- ============================================== CONTENT ============================================== -->
                <div class="col-xs-12 col-sm-12 col-md-9 homebanner-holder">
                    <div id="hero">
                        <div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">
                            <div class="item" style="background-image: url(/img/index3.jpg);height: 460px">
                            </div>
                            <div class="item" style="background-image: url(/img/index2.jpg);height: 460px">
                            </div>
                            <div class="item" style="background-image: url(/img/index1.jpg);height: 460px">
                            </div>

                        </div>
                        <!-- /.owl-carousel -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer id="footer" class="footer color-bg">
        <div class="copyright-bar">
            <div class="container">
                <div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2020.From graduation project.
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<script src="js/common.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="new/js/bootstrap.min.js"></script>
<script src="new/js/bootstrap-hover-dropdown.min.js"></script>
<script src="new/js/owl.carousel.min.js"></script>
<script src="new/js/echo.min.js"></script>
<script src="new/js/jquery.easing-1.3.min.js"></script>
<script src="new/js/bootstrap-slider.min.js"></script>
<script src="new/js/jquery.rateit.min.js"></script>
<script src="new/js/lightbox.min.js"></script>
<script src="new/js/bootstrap-select.min.js"></script>
<script src="new/js/wow.min.js"></script>
<script src="new/js/scripts.js"></script>

<script>
    var vm = new Vue({
        el: "#indexContent",
        data: {
            isLogin : false,
            userId: '',
            nickName : '',
            types: [],
            searchValue: ''
        },
        created: function () {
            var vms = this;
            vms.checkUser();
            vms.getTypes();
        },

        methods: {
            searchName(){
                window.localStorage.setItem("searchValue",this.searchValue);
                window.location.href="Category.html";
            },
            toCategory(id,name){
                window.localStorage.setItem("categoryId",id);
                window.localStorage.setItem("categoryName",name);
                window.location.href="Category.html";
            },
            checkUser : function(){
                var that = this;
                const isLogin = window.localStorage.getItem("isLogin");
                if (isLogin){
                    that.userId = window.localStorage.getItem("userId");
                    that.nickName = window.localStorage.getItem("nickName");
                    that.isLogin = true;
                }
            },
            logout : function(){
                window.localStorage.clear();
                window.location.href="index.html";
            },

            getTypes(){
                const  that = this;
                HttpGet("/type/getList",null,function(res){
                    if (res.result == true){
                        that.types = res.data;
                    }else{
                        layer.msg("请稍后重试......",{icon:2,time:1500});
                    }
                })
            }

        },
    });
</script>
</body>
</html>

